<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=323656
-->
<head>
  <title>Test for Bug 323656</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>        
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
    <style>
      /**
       * The idea is that "color" inherits by default while "border-color" does
       * not.  So if the former is red and the latter is green on a parent, and
       * the child's border-color is set to "inherit", it'll be green only if
       * the child is inheriting from the parent.  If not, it'll either be
       * whatever the border-color is on what it's inheriting from, which will
       * be red if what it's inheriting from has the default (currentColor)
       *border-color).
       */
      
      /* 't' for "test" */
      #display, #display *
        { color: red; border: 0px hidden red; background: transparent }
      #display .t { border-color: green }
      #display .t > :first-child
        { border-color: inherit; border-style: solid; border-width: 10px }
    </style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323656">Mozilla Bug 323656</a>
<p id="display">
  <select size="1" class="t">
    <option id="testOption"></option>
  </select>
</p>
<div id="content" style="display: none">
  
</div>
<pre id="test">
<script class="testbody" type="text/javascript">

/** Test for Bug 323656 **/
var s = document.defaultView.getComputedStyle($("testOption"), "");
is(s.borderRightColor, "rgb(0, 128, 0)", "Inheritance broken");


</script>
</pre>
</body>
</html>

